<template>
  <div class="bigshare">
    <header>
      <span @click="$back"
        ><van-icon name="arrow-left" color="#fff" size="18"
      /></span>
      <strong>{{ $t("language.Share.name") }}</strong>
      <span @click="$openPage('/kefu')"
        ><img v-lowlazy="getImg('kefu.png')" alt=""
      /></span>
    </header>
    <div style="height: 55px"></div>
    <div class="Share">
      <dl>
        <dd
          v-for="(item, index) in btnlist"
          @click="changeindex(item, index)"
          :key="index"
        >
          <Skeleton :loading="loading">
            <template #ske>
              <div style="width: 100%">
                <van-skeleton-image
                  style="width: 54px; height: 54px; border-radius: 5px"
                />
                <van-skeleton-paragraph
                  style="height: 18px; width: 54px; margin-top: 10px"
                />
              </div>
            </template>
            <template #main>
              <div class="dd-item" :class="btnactive == index ? 'active' : ''">
                <img
                  v-if="btnactive != index"
                  v-lowlazy="getImg(item.img)"
                  alt=""
                />

                <img v-else v-lowlazy="getImg(item.imgactive)" alt="" />
              </div>
              <span :class="btnactive == index ? 'activefont' : ''">{{
                $t(item.lang)
              }}</span>
            </template>
          </Skeleton>
        </dd>
      </dl>
      <component :is="iscomponent" :loading="loading" />
    </div>
  </div>
</template>

<script setup lang="ts" name="Share">
import { reactive, nextTick, onMounted, defineAsyncComponent, ref } from "vue";
let myinfo = defineAsyncComponent(() => import("./children/myinfo.vue"));
let detail = defineAsyncComponent(() => import("./children/detail.vue"));
let tables = defineAsyncComponent(() => import("./children/table.vue"));
let totor = defineAsyncComponent(() => import("./children/tutor.vue"));
let leader = defineAsyncComponent(() => import("./children/leader.vue"));
let guide = defineAsyncComponent(() => import("./children/guide.vue"));
let btnactive = ref(0);
let iscomponent = ref(myinfo);
let loading = ref(true);
onMounted(() => {
  nextTick(() => {
    // loading.value = false;
    let time = setInterval(() => {
      loading.value = false;
      clearInterval(time);
    }, 500);
  });
});

const getImg = (url) => {
  return new URL(`../../assets/img/${url}`, import.meta.url).href;
};
let changeindex = (item: any, index: number) => {
  btnactive.value = index;
  iscomponent.value = item.component;
};
let btnlist = reactive([
  {
    lang: "language.Share.btn1",
    img: "re1.png",
    imgactive: "re1l.png",
    component: myinfo,
  },
  {
    lang: "language.Share.btn2",
    img: "re2.png",
    imgactive: "re2l.png",
    component: totor,
  },
  {
    lang: "language.Share.btn3",
    img: "re3.png",
    imgactive: "re3l.png",
    component: detail,
  },
  {
    lang: "language.Share.btn4",
    img: "re4.png",
    imgactive: "re4l.png",
    component: tables,
  },
  {
    lang: "language.Share.btn5",
    img: "re5.png",
    imgactive: "re5l.png",
    component: leader,
  },
  {
    lang: "language.Share.btn6",
    img: "re6.png",
    imgactive: "re6l.png",
    component: guide,
  },
]);
</script>
<style scoped lang="scss">
.bigshare {
  width: 100vw;
  height: 100vh;
  @include flex(column,flex-start,center);
  header {
    width: 100%;
    height: 45px;
    position: fixed;
    left: 0;
    z-index: 7;
    top: 0;
    @include flex(row, space-between, center);
    background-color: rgb(36, 39, 43);
    padding: 0 20px;
    color: #fff;
    span {
      display: block;
      height: 28px;
      width: 28px;
      line-height: 28px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .Share {
    background-color: #1a1a1a;
    padding: 0px 0px 90px;
    width: 100%;
    flex: 1;
    background-color: rgb(26, 26, 26);
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }
    :deep(.van-skeleton-image__icon::before) {
      font-size: 18px;
    }
    :deep(.van-skeleton-image__icon) {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    dl {
      overflow-x: scroll;
      width: 100%;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }
      @include flex(row, space-between, center);
      flex-wrap: nowrap;
      height: 110px;
      dd {
        height: 100px;
        min-width: 80px;
        width: 80px;
        @include flex(column, flex-start, center);
        .dd-item {
          width: 54px;
          height: 54px;

          border: 2px solid #0a906c;
          @include flex(row, center, center);
          border-radius: 10px;
          img {
            width: 25px;
            height: 25px;
          }
        }
        .active {
          background: #0a906c;
        }
        .activefont {
          font-weight: bold;
        }

        span {
          width: 100px;
          display: block;
          color: #0a906c;
          font-size: 13px;
          padding-top: 10px;
          white-space: wrap;
          text-align: center;
        }
      }
    }
  }
}
</style>
